<script setup lang="ts">
import QAsyncLoading from '@/components/q-async-loading/index.vue';

defineOptions({
    name: 'ProcessManagementList'
});

const route = useRoute();
const router = useRouter();
const component = {
    processList: defineAsyncComponent({
        loader: () => import('./view/ProcessList/index.vue'),
        loadingComponent: QAsyncLoading
    }),
    procedureList: defineAsyncComponent({
        loader: () => import('./view/ProcedureList/index.vue'),
        loadingComponent: QAsyncLoading
    })
};

const name = 'processList';

type ActiveName = keyof typeof component;
const activeName = ref<ActiveName>((route.params.name as ActiveName) || name);

const handleChange = (e: any) => {
    if (e === 'processList' && route.params.name) {
        router.replace('/process');
    }
};
</script>
<template>
    <div class="f-column f-1">
        <el-tabs v-model="activeName" @tab-change="handleChange">
            <el-tab-pane label="工艺路线" name="processList" />
            <el-tab-pane label="工序列表" name="procedureList" />
        </el-tabs>

        <keep-alive>
            <component :is="component[activeName]"></component>
        </keep-alive>
    </div>
</template>

<style scoped lang="scss">
@include b(process) {
    :deep() {
        .el-tabs__item:nth-child(2) {
            display: none;
        }
    }
}

@include b(working) {
    :deep() {
        .el-tabs__item:nth-child(3) {
            display: none;
        }
    }
}
</style>
